<template>
  <div class="team_item_box">
    <a-card :style="{ minHeight: '670px' }" :title="team.title">
      <template #extra>
        <a-tag class="teamTeamTag" v-for="tag in team.tags" :key="tag"
               color="green">
          {{ tag }}
        </a-tag>
      </template>
      <template #actions>
      <span class="icon-hover" @click="collectTeam">
        <icon-star-fill v-show="collectStatus" />
        <icon-star v-show="!collectStatus" />
      </span>
      <span class="icon-hover" @click="thumbTeam">
        <icon-thumb-up-fill v-show="thumbStatus" />
        <icon-thumb-up v-show="!thumbStatus" />
      </span>
        <span class="icon-hover"> <IconShareInternal /> </span>
        <span class="icon-hover"> <IconMore /> </span>
      </template>
      <div class="teamTitle">
        判题条件
      </div>
      <a-row class="teamLimitInfo">
        <a-col :span="8">
          <a-space class="mr5">
            时间限制
          </a-space>
          <a-space>
            {{ team.judgeconfig?.timeLimit }}
          </a-space>
        </a-col>
        <a-col :span="8">
          <a-space class="mr5">
            内存限制
          </a-space>
          <a-space>
            {{ team.judgeconfig?.memoryLimit }}
          </a-space>
        </a-col>
        <a-col :span="8">
          <a-space class="mr5">
            堆栈限制
          </a-space>
          <a-space>
            {{ team.judgeconfig?.stackLimit }}
          </a-space>
        </a-col>
      </a-row>
      <div class="doTeam_content">
        <p>
          {{ team.content }}
        </p>

        <h2>
          示例 1:
        </h2>
        <p>
          输入: {{ team.judgecase?.input?.[0] }}
          输出: {{ team.judgecase?.output?.[0] }}
        </p>

        <h2>
          示例 2:
        </h2>
        <p>
          输入: {{ team.judgecase?.input?.[1] }}
          输出: {{ team.judgecase?.output?.[0] }}
        </p>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";

const store = useStore();
const team = computed(() => store.state.team.team);
const collectStatus = ref(false);
const thumbStatus = ref(false);

onMounted(() => {
  // 查询当前题目收藏状态 by uid 和 qid

});

const thumbTeam = () => {
  thumbStatus.value = !thumbStatus.value;
}
const collectTeam = () => {
  collectStatus.value = !collectStatus.value;
}
</script>

<style scoped>
.teamTeamTag {
  margin-right: 5px;
}

.mr5 {
  margin-right: 5px;
}

.teamTitle {
  font-size: 16px;
  font-weight: bold;
  line-height: 35px;
}

.teamLimitInfo {
  color: lightslategray;
  line-height: 25px;
}

.doTeam_content {
  height: 491px;
}

.arco-icon {
  font-size: 23px;
  stroke-linecap: square;
  stroke-linejoin: round;
}
</style>